<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.common.js

"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 400px; height: 400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option1 = {
			title : {
				text : '个人能力分布图',
				top : 10,
				left : 10
			},
			tooltip : {
				trigger : 'item',
				backgroundColor : 'rgba(0,0,250,0.2)'
			},
			legend : {
				type : 'scroll',
				bottom : 10,
				data : (function() {
					var list = [];
					for (var i = 1; i <= 28; i++) {
						list.push(i + 2000 + '');
					}
					return list;
				})()
			},
			visualMap : {
				top : 'middle',
				right : 10,
				color : [ 'red', 'yellow' ],
				calculable : true
			},
			radar : {
				indicator : [ {
					text : '学历',
					max : 400
				}, {
					text : '工作经验',
					max : 400
				}, {
					text : '年龄',
					max : 400
				}, {
					text : '性别',
					max : 400
				}, {
					text : '工作地点',
					max : 400
				} ]
			},
			series : (function() {
				var series = [];
				for (var i = 1; i <= 28; i++) {
					series.push({
						name : '个人能力分布图',
						type : 'radar',
						symbol : 'none',
						lineStyle : {
							width : 1
						},
						emphasis : {
							areaStyle : {
								color : 'rgba(0,250,0,0.3)'
							}
						},
						data : [ {
							value : [ (40 - i) * 10, (38 - i) * 4 + 60,
									i * 5 + 10, i * 9, i * i / 2 ],
							name : i + 2000 + ''
						} ]
					});
				}
				return series;
			})()
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>